<template>
  <div class="full-div">
    <h4>加载wms图层服务</h4>
    <l-map
      :zoom="zoom"
      :center="center"
      class="lmap"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate">
      <l-control-layers > </l-control-layers>
      <l-wms-tile-layer
          v-for="layer in layers"
          :key="layer.name"
          :base-url="baseUrl"
          :layers="layer.layers"
          :visible="layer.visible"
          :name="layer.name"
          layer-type="base">
      </l-wms-tile-layer>
      <l-marker :lat-lng="marker">
        <l-popup>
          <div @click="popupClick">
            I am a tooltip
            <p v-show="showParagraph">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi. Donec finibus semper metus id malesuada.
            </p>
          </div>
        </l-popup>
      </l-marker>
    </l-map>
  </div>
</template>

<script>
import Vue from 'vue'
import L from 'leaflet'
import { LMap, LMarker, LPopup, LWMSTileLayer, LControlLayers } from 'vue2-leaflet'
Vue.component('l-wms-tile-layer', LWMSTileLayer)
Vue.component('l-control-layers', LControlLayers)

export default {
  name: 'TileTianditu',
  components: {
    LMap,
    LMarker,
    LPopup,
    LWMSTileLayer
  },
  data() {
    return {
      zoom: 13,
      center: L.latLng(47.413220, -1.219482),
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      baseUrl: 'https://demo.boundlessgeo.com/geoserver/ows?',
      marker: L.latLng(47.413220, -1.219482),
      currentZoom: 13,
      currentCenter: L.latLng(47.413220, -1.219482),
      showParagraph: false,
      layers: [
        {
          name: 'Boundaries',
          visible: false,
          layers: 'ne:ne_10m_admin_0_boundary_lines_land'
        },
        {
          name: 'Countries',
          visible: true,
          layers: 'ne:ne_10m_admin_0_countries'
        },
        {
          name: 'Boundaries and Countries',
          visible: true,
          layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
        }
      ]
    }
  },
  methods: {
    zoomUpdate (zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate (center) {
      this.currentCenter = center;
    },
    showLongText () {
      this.showParagraph = !this.showParagraph;
    },
    popupClick () {
      alert('Popup Click!');
    }
  }
}
</script>

<style scoped>
.full-div {
  width: 900px;
  height: 500px;
  margin: auto;
}

.lmap {
  width: 100%;
  height: 100%;
}
</style>

